<template>
  <div class="task-order">
    <table style="padding: 0 5px">
      <thead>
        <th>下单时间</th>
        <th width="85">下单(实数)</th>
        <th v-if="task_type == '_surebets_hand' || task_type == '_surebets_auto'">实数总金额</th>
        <th width="85">盈亏(虚数)</th>
        <th width="85">盈亏(实数)</th>
        <th>盈亏状态</th>
        <th v-if="task_type == '_surebets_hand' || task_type == '_surebets_auto'">利润率</th>
        <th>交收状态</th>
        <th>结算状态</th>
        <th>平台单号</th>
        <th>下单账号</th>
        <th v-if="task_type == '_copy_order_auto'" width="130">跟单账号</th>

        <th>操作</th>
      </thead>
      <tbody v-if="list.length == 1 && list[0].order_list.length == 0">
        <tr>
          <td style="text-align: center; margin: 10px 0; color: #778090" colspan="15">暂无数据</td>
        </tr>
      </tbody>
      <tbody v-for="(item, index) in list" :key="index" style="position: relative">
        <div class="order_downindex" v-if="list.length > 1">{{ index + 1 }}</div>
        <tr
          v-for="(item2, index2) in item.order_list"
          :key="index2"
          :class="stylepadding(list, item, index, index2)"
          style="position: relative"
        >
          <td>{{ item2.created_at ? item2.created_at : '' }}</td>
          <td>
            <div style="font-weight: bold; float: right; margin-right: 25px">{{ item2.total_amount }}</div>
          </td>
          <td v-if="task_type == '_surebets_hand' || task_type == '_surebets_auto'" style="font-weight: bold">
            {{ item2.total_amount }}
          </td>
          <td>
            <div style="float: right; margin-right: 25px">
              <div :style="item2.total_win_back > 0 ? 'color: #02a66e;' : 'color: #f83e3e'">
                {{ item2.total_win_back }}
              </div>
            </div>
          </td>
          <td>
            <div style="float: right; margin-right: 25px">
              <div :style="item2.total_win_back > 0 ? 'color: #02a66e;' : 'color: #f83e3e'">
                {{ item2.win_back }}
              </div>
            </div>
          </td>
          <td>
            <div>
              <div
                :style="
                  getprofitStatus(item2.total_win_back, item2.win_back) == '盈'
                    ? 'color: #02a66e;'
                    : 'color: #f83e3e'
                "
              >
                {{ getprofitStatus(item2.total_win_back, item2.win_back) }}
              </div>
            </div>
          </td>
          <td v-if="task_type == '_surebets_hand' || task_type == '_surebets_auto'">
            {{ item2.profit_rate }}
          </td>
          <td>
            <div v-if="item2.is_settlement == null || item2.is_settlement == 0">未标记</div>
            <div v-if="item2.is_settlement == 1">未交收</div>
            <div v-if="item2.is_settlement == 2">已交收</div>
          </td>
          <td>
            <div style="display: flex; align-items: center">
              <div
                style="width: 6px; height: 6px; border-radius: 50%"
                :style="item2.check_status == 0 ? 'background-color: #778090;' : 'background-color: #47acff;'"
              ></div>
              <div
                style="margin-left: 8px"
                :style="item2.check_status == 0 ? 'color: #778090;' : 'color: #47acff;'"
              >
                {{ item2.check_status == 0 ? '未结算' : '已结算' }}
              </div>
            </div>
          </td>
          <td>{{ item2.bet_id }}</td>
          <td>{{ item2.user_name }}</td>
          <td v-if="task_type == '_copy_order_auto'">{{ item2.member }}</td>

          <td style="color: var(--pcmain-color) !important">标记</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
const props = defineProps({
  list: Array,
  task_type: String,
})

const getprofitStatus = (total_win_back, win_back) => {
  if (total_win_back == 0 && win_back == 0) {
    return '走'
  } else if (total_win_back > 0 || win_back > 0) {
    return '盈'
  } else if (total_win_back < 0 || win_back < 0) {
    return '亏'
  }
}

const stylepadding = (list, item, index, index2) => {
  let str = ''
  if (list.length > 1 && index2 + 1 == item.order_list.length && index + 1 != list.length) {
    str += 'padding_td'
  }
  if (list.length > 1 && index2 + 1 == item.order_list.length && index != 0) {
    str += ' paddingtop_td'
  }
  return str
}
</script>
<style lang="scss" scoped>
.task-order {
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
}
table {
  width: 100%;
  //   text-align: center;
  font-size: 14px;
}

th {
  font-weight: inherit;
  line-height: 28px;
  color: #778090;
}

td {
  line-height: 28px;
  color: #252a30;
}

.status {
  color: #f1b31d;
}

.platform {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    margin-right: 8px;
    width: 16px;
    height: 16px;
  }
}

.padding_td td {
  padding-bottom: 8px;
}
.paddingtop_td td {
  padding-top: 0px;
}
.order_downindex {
  position: absolute;
  z-index: 9999;
  left: -15px;
  width: 16px;
  height: 16px;
  border-radius: 0 8px 8px 0;
  background-color: #778090;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<style>
.padding_td td::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* 这里是设置下边框的高度 */
  background-color: #ebebeb; /* 这里是设置下边框的颜色 */
  z-index: 1; /* 确保下边框在表格上方 */
}
</style>
